import { Button, Col, Form, Input, Row, Space } from 'antd';
import { ContacterAPI } from '../common/type';
import cls from 'classnames';
import pageStyles from '@/common/pageLayout.less';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';

export const CustomerSearchForm: React.FC<ContacterAPI.ICustomerSearchForm> = ({
  searchReloadTable,
}) => {
  const [searchForm] = Form.useForm();

  /**
   * 点击搜索
   */
  const clickSearchBtn = () => {
    let formValue = searchForm?.getFieldsValue();
    let searchParams: Record<string, any> = {};
    if (formValue?.customerName) {
      searchParams['customerName'] = formValue?.customerName;
    }
    if (formValue?.phoneMobile) {
      searchParams['phoneMobile'] = formValue?.phoneMobile;
    }
    if (formValue?.emailNum) {
      searchParams['emailNum'] = formValue?.emailNum;
    }
    searchReloadTable(searchParams);
  };

  /**
   * 重置
   */
  const clickReloadBtn = () => {
    searchForm?.resetFields(); //清空表单输入框
    searchReloadTable({});
  };

  return (
    <>
      <div
        className={cls(pageStyles['fromView-styles'])}
        style={{ padding: 0 }}
      >
        <Form layout="inline" form={searchForm}>
          <Row gutter={[16, 16]}>
            <Col span={6}>
              <Form.Item name={'customerName'}>
                <Input placeholder="姓名" allowClear />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name={'phoneMobile'}>
                <Input placeholder="联系方式" allowClear />
              </Form.Item>
            </Col>
            <Col span={6}>
              <Form.Item name={'emailNum'}>
                <Input placeholder="邮箱" allowClear />
              </Form.Item>
            </Col>
            <Col
              style={{
                textAlign: 'right',
              }}
              span={6}
            >
              <Space>
                <Button
                  type={'primary'}
                  icon={<SearchOutlined />}
                  onClick={() => {
                    clickSearchBtn();
                  }}
                  onMouseOut={(event: any) => {
                    event?.target?.nodeName == 'BUTTON'
                      ? event?.target?.blur()
                      : event?.target?.parentNode?.blur();
                  }}
                >
                  搜索
                </Button>
                <Button
                  icon={<ReloadOutlined />}
                  onClick={() => {
                    clickReloadBtn();
                  }}
                  onMouseOut={(event: any) => {
                    event?.target?.nodeName == 'BUTTON'
                      ? event?.target?.blur()
                      : event?.target?.parentNode?.blur();
                  }}
                >
                  重置
                </Button>
              </Space>
            </Col>
          </Row>
        </Form>
      </div>
    </>
  );
};
